<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	作者：906607363@qq.com肖静怡
        	时间：2018-10-10
        	描述：
        -->
       <link rel="stylesheet" href="base/plugins/font-awesome-4.7.0/css/font-awesome.css" media="all"/>
   		 <link rel="stylesheet" href="base/plugins/layui/css/layui.css"  media="all"/>
   		 <link rel="stylesheet" href="base/plugins/buttonCaptcha/jquery.buttonCaptcha.styles.css" media="all" />
   		 <link rel="stylesheet" href="base/plugins/jquery-ui/jquery-ui.min.css" />
	</head>
	
	<style type="text/css">	
		body{
			background:url(img/login_bg.jpg)no-repeat center center fixed;
			background-size: 100% 100%;
		}	
		
		#main{
			width: 440px;
			height: 440px;			
			margin: 10% auto;			
			border-radius: 10px;
			color:aliceblue;
			background-color:gray;
			background-color: rgba(9,10,42,0.407843);
		}
		#main h3{
			text-align: center;
			font-size: 25px;
			padding: 10px;
			border-bottom: 1px solid aliceblue;
		}
		.text{
			width: 500px;
			margin-left: 20%;
			margin-top: 23px;
			
		}
		.text input{
			width: 280px;
			height: 32px;
			border-radius: 3px;
		}
	</style>
	
	<body>
		<div id="main">
			<form action="#" method="post" class="layui-form">
				<div>		
				<h3>后台登录</h3>
				</div>
						
				<div class="text">					
					<input id="account" type="text" class="layui-input" lay-verify="required" placeholder=" 这里输入登录名" />
				</div>
				
				<div class="text">
					<input id="passWord" type="password" class="layui-input" lay-verify="required" name="password" placeholder="这里输入密码" />
				</div>
			
			<div class="text">				
					<label class="layui-form-label">记住密码？</label>
					<div class="layui-input-block">
					<input type="checkbox" name="close" lay-skin="switch"  id="remember" lay-text="ON|OFF"/>
					</div>
			</div>
	
			<div class="text">
				<button  lay-submit type="submit" layui-submit lay-filter="login" class="layui-btn layui-btn-primary layui-col-md-offset5 login">登录<button></div>
			</div>					
		</form>
	</div>
		
		<script src="base/js/jquery-1.11.3.min.js"></script>
		<script src="base/plugins/layui/layui.js"></script>
		<script src="base/plugins/jquery-ui/jquery-ui.min.js"></script>
		<script type="text/javascript" src="base/plugins/buttonCaptcha/jquery.buttonCaptcha.js"></script>
		<script src=""></script>
		<script type="text/javascript">
		layui.use(['form'],function(){		
		var form=layui.form;
		form.render();
		form.on('submit(login)', function() {
					if($("#remember").is(":checked")) {
						var account = $("#account").val();
						var passWord = $("#passWord").val();

						localStorage.setItem("account", account);
						localStorage.setItem("passWord", passWord);

					} else {
						localStorage.setItem("account", "");
						localStorage.setItem("passWord", "");
						//localStorage.clear();
					}
					return false; //组织表单跳转，如果需要表单跳转，去掉这段
				});

				function remembers() {
					if(localStorage.getItem("account") != "" && localStorage.getItem("passWord") != "") {
						$("#account").val(localStorage.getItem("account"));
						$("#passWord").val(localStorage.getItem("passWord"));
						$("#remember").prop("checked", true);
					}
					form.render();
				}
				remembers();
				function addUnclock(){
			var engLish=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
			var attr=[];
			var code="";
			for(var i=0;i<4;i++){
				 var ranNum = Math.ceil(Math.random() * 25);
				 if(attr.indexOf(ranNum)==-1){
				 	attr.push(ranNum);
				 }else{
				 	i--;
				 }
				 console.log(attr);
			}
			console.log(attr);
			
			for(var i=0;i<4;i++){
				code+=engLish[attr[i]];
				console.log(engLish[attr[i]]);
				
			}
			$(".captcha_gbws_wrap").remove();
			$(".login").buttonCaptcha({
				codeWord:code,//匹配的验证码
				codeZone:code,
				captchaHeader:"请正确的将字符移动到框内",
				captchaUnlocked:"通过验证"
			});
			$(".captcha_gbws_wrap").appendTo("#verifygroup");
		}
		addUnclock();
		});	
		/*
		 * 添加验证码
		 */
		/*f*/
	</script>
	</body>
<html>
